<template>
	<view class="order">
		<view class="order-top">
			<view class="o-t-body">
				<uni-card title="房间信息" :is-shadow="false" :border="false" :margin="'0 0 20rpx 0'" :spacing="'20rpx 40rpx'" :padding="0">
					<view v-if="state">
						<uni-list :border="false" v-if="listData.length > 0">
							<uni-swipe-action class="uni-action" ref="action">
								<uni-swipe-action-item class="uni-action-item" :threshold="0" :right-options="options1"
									@click="delClick(obj.id)" v-for="obj in listData" :key="obj.id">
									<uni-list-item :border="false">
										<!-- 自定义 body -->
										<view slot="body" class="slot-box slot-main">
											<image class="slot-main-image" :src="obj.room_type_image[0]" mode=""></image>
											<view class="slot-main-con">
												<view class="main-con">
													<text class="name">{{obj.room_name || ''}}</text>
													<view class="">
														<text class="money">￥</text>
														<text class="name">{{obj.price || '0.00'}}</text>
													</view>
												</view>
												<view class="main-con score">
													<text class="type">{{obj.type_name || ''}}</text>
												</view>
											</view>
										</view>
									</uni-list-item>
								</uni-swipe-action-item>
							</uni-swipe-action>
						</uni-list>
					</view>
					<view style="width: 100%;display: flex;flex-direction: column;justify-content: center;align-items: center;height:100%;" v-else>
						<image :src="imgUrl" style="width: 175rpx;height:145rpx;margin:20rpx 0 16rpx;"></image>
						<text style="font-size: 28rpx;font-weight: 500;color: #777777;margin-bottom: 20rpx;">暂无房间信息!</text>
					</view>	
				</uni-card>
				<uni-card title="服务详情" :is-shadow="false" :border="false" :margin="'0 0 20rpx 0'" :spacing="'20rpx 40rpx'" :padding="0">
					<view class="o-t-input">
						<view class="o-t-box">
							<text class="t-box-text">服务员</text>
							<text class="t-box-text1">{{pname || ''}}</text>
						</view>
						<view class="o-t-box">
							<text class="t-box-text">服务时间</text>
							<text class="t-box-text1">{{service_time || ''}}</text>
						</view>
						<view class="o-t-box1">
							<view class="t-box-text">备注信息</view>
							<text class="t-box-text1">{{remarks == null?'未添加备注信息':remarks}}</text>
						</view>
					</view>
				</uni-card>
			</view>
		</view>
		<view class="order-end">
			<view class="num">
				<text class="num-text">合计：</text>
				<text class="num-text num-text1">{{total_money || '0.00'}}</text>
			</view>
			<view class="but">
				<button class="but-but" size="mini" @click="addClick()">提交订单</button>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				imgUrl:`${getApp().globalData.imgScr}jd/dingdankongzhuangtai.png`,
				listData: [], // 房型列表信息
				total_money:0, // 订单总额
				id:'', // 房间id
				uid:'', // 订单id
				pname:'', // 保洁名称
				service_time:'', // 服务时间
				remarks:'', // 备注信息
				state:true, // 判断是否有数据
				options1: [{ // 左滑动 操作按钮数据
					text: '删除',
					style: {
						backgroundColor: '#FF4B4B',
						color: '#ffffff'
					}
				}],
			}
		},
		onLoad(res) {
			this.id = res.id
			this.uid = res.uid
			this.pname = res.pname
			let _this = this
			this.$http.post('/index/Hotelorder/sure_order_room',{roomids:res.id,order_id:res.uid}).
			then(function (rep) {
				//这里只会在接口是成功状态返回
				_this.listData = rep.room_list
				_this.state = _this.listData.length
				_this.total_money = rep.total_money
				_this.remarks = rep.other_info.remarks // 备注信息
				_this.service_time = rep.other_info.service_time // 服务时间
			}).catch(function (e) {
				//这里只会在接口是失败状态返回，不需要去处理错误提示
				uni.showToast({
					title: e.errMsg,
					icon:"none"
				})
			});
		},
		methods: {
			/**
			 * 提交订单 按钮触发事件
			 */
			async addClick() {
				if(this.id == '') return uni.showToast({
					title:"请添加房间信息",
					icon:"none"
				})
				try{
					let res = await this.$http.post('/index/Hotelorder/sure_assignment_room',{
						order_id:this.uid,
						room_ids:this.id,
						total_money:this.total_money,
					})
					uni.setStorageSync('tabIndex', 1);
					uni.switchTab({
						url: '/pages/tag/indent/indent'
					})
				}catch(e){
					//TODO handle the exception
					uni.showToast({
						title: e.errMsg,
						icon:"none"
					})
				}
				
			},
			/**
			 * 删除按钮 触发的事件
			 * @param {Object} id 当前列表数据的id
			 */
			delClick: function(id) {
				let _this = this
				
				this.listData.forEach((item,index) => {
					if(item.id == id) {
						_this.listData.splice(index,1)
					}
				})
				let rid = []
				let s = 0
				this.listData.forEach(item => {
					rid.push(item.id)
					s += item.price*1
				})
				this.total_money = s
				this.id = rid.join(',')
				this.state = this.listData.length
				if(this.listData.length > 0) {
					uni.showToast({
						title:`删除成功`,
						icon:'none'
					})
					
				}else {
					uni.showToast({
						title:'暂无房间信息！请重新添加！',
						icon:'none'
					})
				}
			},
			/**
			 * 时间选择器 选择时间 确定后触发
			 * @param {Object} e 当前选择的时间
			 */
			changeLog(e) {
				this.date = e
			},
		}
	}
</script>

<style lang="scss">
	.order {
		display: flex;
		flex-direction: column;
		justify-content: space-between;
		box-sizing: border-box;
		width: 100%;
		height: 100vh;
		padding-top: 20rpx;
		overflow: hidden;

		//内容区域样式
		.order-top {
			display: flex;
			flex-direction: column;
			flex: 1;
			margin-bottom: 20rpx;
			overflow: hidden;
			padding: 0 20rpx;

			// 中间 列表栏样式
			.o-t-body {
				flex: 1;
				overflow: auto;

				// 列表每一项内容的样式
				.uni-list-item__container {
					box-sizing: border-box;
					padding: 0;
					margin-bottom: 20rpx;
				}

				// 列表区域 自定义 header body 公共样式
				.slot-box {
					display: flex;
					align-items: center;
				}
				// 卡片公共样式
				.uni-card {
					border-radius: 20rpx;
					overflow: hidden;
					.uni-card__header {
						padding: 20rpx 0;
						.uni-card__header-content-title {
							font-size: 28rpx;
							font-weight: 600;
							color: #000000;
						}
					}
					
				}
				// 列表区域 自定义 body 的样式
				.slot-main {
					flex: 1;

					// 列表区域 图片样式
					.slot-main-image {
						width: 100rpx;
						height: 100rpx;
						border-radius: 20rpx;
						border: 0;
						margin-right: 16rpx;
					}

					// 列表区域 详情信息 样式
					.slot-main-con {
						flex: 1;
						display: flex;
						flex-direction: column;
						margin-left: 16rpx;
						padding-right: 24rpx;

						.main-con {
							flex: 1;
							display: flex;
							justify-content: space-between;
							align-items: center;
							color: #000000;
							.name {
								font-size: 34rpx;
								font-weight: 500;
							}
							.money {
								font-size: 20rpx;
								font-weight: 500;
							}
							.type {
								font-size: 28rpx;
								font-weight: 500;
							}
						}

						

						.score {
							margin: 12rpx 0;
						}
					}
				}

				// 输入栏 样式
				.o-t-input {
					background-color: #FFFFFF;

					.o-t-box {
						display: flex;
						justify-content: space-between;
						align-items: center;
						margin-bottom: 20rpx;

						.t-box-text {
							font-size: 28rpx;
							font-weight: 500;
							color: rgba($color: #000000, $alpha: 0.7);
						}
						.t-box-text1 {
							font-size: 28rpx;
							font-weight: 500;
							color: #000000;
						}
						.t-box-text2 {
							font-size: 28rpx;
							font-weight: 500;
							color: #FF4B4B;
						}
						.t-box-text3 {
							font-size: 34rpx;
							font-weight: 500;
						}

						.date-text {
							font-size: 28rpx;
							font-weight: 500;
							color: #000000;
						}

						.date-text1 {
							font-size: 28rpx;
							font-weight: 500;
							color: rgba($color: #000000, $alpha: 0.3);
						}
					}
					.o-t-box1 {
						display: flex;
						flex-direction: column;
						
						.t-box-text {
							font-size: 28rpx;
							font-weight: 500;
							color: rgba($color: #000000, $alpha: 0.7);
							margin-bottom: 20rpx;
						}
						.t-box-text1 {
							box-sizing: border-box;
							min-height: 200rpx;
							font-size: 28rpx;
							font-weight: 500;
							color: #000000;
							border-radius: 4px;
							border: 1px solid #F0F0F0;
							padding: 20rpx;
							margin-bottom: 20rpx;
						}
					}
				}
			}
		}

		// 底部操作区域样式
		.order-end {
			display: flex;
			justify-content: space-between;
			align-items: center;
			box-sizing: border-box;
			width: 100%;
			padding: 20rpx;
			background-color: #ffffff;
			
			.num {
				margin-right: 48rpx;
			
				.num-text {
					font-size: 32rpx;
					font-weight: 600;
				}
			
				.num-text1 {
					font-weight: 400;
					color: #DD524D;
				}
			}

			// 立即预约按钮样式
			.but {
				display: flex;
				justify-content: flex-end;
				align-items: center;
				padding-right: 20rpx;
				.but-but {
					line-height: 80rpx;
					border-radius: 40rpx;
					background: linear-gradient(-90deg, #8dc9f1, #d8eefc);
					font-size: 32rpx;
					color: #FFFFFF;
				}
			}
		}
	}
</style>
